<script setup>
import { onMounted, ref } from 'vue'
import { getAllApi } from '@/api/item'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const mref = ref('mref')
const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(5)
const size = ref('default')
const background = ref(true)
const disabled = ref(false)

const tableFormData = ref({
  commodityCode: null,
  name: null,
  category: null
})
const handleSizeChange = (val) => {
  pageSize.value = val
  getAll()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getAll()
}
const getAll = async () => {
  let res = await getAllApi(tableFormData.value.commodityCode, tableFormData.value.name, tableFormData.value.category, currentPage.value, pageSize.value)
  tableData.value = res.rows
  total.value = res.total
}
onMounted(() => {
  getAll()
})
</script>
<template>
  <el-button type="primary" @click="router.push('/item/add')">+</el-button>
  <el-form :model="tableFormData" :inline="true">
    <el-form-item label="商品编码">
      <el-input v-model="tableFormData.commodityCode" />
    </el-form-item>
    <el-form-item label="商品名称">
      <el-input v-model="tableFormData.name" />
    </el-form-item>
    <el-form-item label="商品类别">
      <el-input v-model="tableFormData.category" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="">查询</el-button>
      <el-button type="danger" @click="">重置</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%" :expand-row-keys="expandedKeys" row-key="id"
    @expand-change="handleExpandChange">
    <el-table-column type="index" label="#" width="50" fixed />
    <el-table-column type="selection" width="50" />
    <el-table-column prop="name" label="区域">
      <template #default="{ row, $index }">
        <span v-if="!row.children || row.children.length === 0">
          {{ row.name }}
        </span>
        <span v-else>
          <span>{{ row.name }}</span>
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="id" label="商品id" width="80" />
    <el-table-column prop="commdityCode" label="商品编码" width="80" />
    <el-table-column prop="itemName" label="商品名称" width="80" />
    <el-table-column prop="categoryName" label="商品类别" width="120" />
    <el-table-column prop="description" label="商品描述" width="120" />
    <el-table-column prop="supplierName" label="供应商名称" width="120" />
    <el-table-column prop="brandName" label="品牌" width="120" />
    <el-table-column prop="itemCode" label="商品条码" width="120" />
    <el-table-column prop="weight" label="商品重量" width="120" />
    <el-table-column prop="length" label="商品长度" width="120" />
    <el-table-column prop="width" label="商品宽度" width="120" />
    <el-table-column prop="height" label="商品高度" width="120" />
    <el-table-column prop="volume" label="商品体积" width="120" />
    <el-table-column prop="itemPrice" label="商品价格" width="120" />
    <el-table-column prop="createBy" label="创建人" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column fixed="right" label="操作" width="200px">
      <template #default="{ row }">
        <el-button type="primary" size="small" @click="handleEdit(row.id)">修改</el-button>
        <el-button type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
      </template>
    </el-table-column> 
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
      :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>